<template>
	<view class="content">
		<view class="uni-form-item uni-column"><input type="tel" class="uni-input" name="" placeholder="请输入手机号" v-model="phone" /></view>
		<view class="uni-form-item uni-column column-with-btn">
			<input type="number" class="uni-input" name="" placeholder="请输入验证码" v-model="yanzheng" />
			<button :class="{ active: !disableCodeBtn }" :disabled="disableCodeBtn" @tap="sendCode">{{ codeBtn.text }}</button>
		</view>
		<view class="uni-form-item uni-column"><input type="password" class="uni-input" name="" placeholder="请输入密码" v-model="possword" /></view>
		<view class="uni-form-item uni-column"><input type="text" class="uni-input" name="" placeholder="请输入邀请码(可不填)" v-model="place" /></view>
		<view class="register" @tap="goSubmit">
			<image src="../../static/kitty-BasicLogin/register.png" mode="aspectFit"></image>
		</view>
		<image src="../../static/img/272a951d186efa3ee4450114ad3dce2.png" mode="" class="ade" v-show="ade"></image>
		<image src="../../static/img/d3813f7f7e63a00b784931c91f645fb.png" mode="" class="ade" v-show="!ade"></image>
		<span  class="wo f26 c666 " @click="reading" :class="{ ica: isActive}">我已阅读并同意</span>
		<span class="xieyi" @click="goxie">《用户协议》</span>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	components: {
		uniIcons
	},
	data() {
		return {
			ade:false,
			
			captchaImg: '',
			seconds: 60,
			codeBtn: {
				text: '获取验证码',
				waitingCode: false,
				count: this.seconds
			},
			phone: '', //手机号
			possword: '', //密码,
			//yanzheng: '',验证码
			place: '', //邀请码
			isActive: false,
			now: 0,
			yanzheng: ''
		};
	},
	onLoad() {},
	methods: {
		sendCode: function() {
			this.codeBtn.waitingCode = true;
			this.codeBtn.count = this.seconds;
			this.codeBtn.text = this.codeBtn.count + 's';

			let countdown = setInterval(() => {
				this.codeBtn.count--;
				this.codeBtn.text = this.codeBtn.count + 's';
				if (this.codeBtn.count < 0) {
					clearInterval(countdown);
					this.codeBtn.text = '重新发送';
					this.codeBtn.waitingCode = false;
				}
			}, 1000);

			this.$ajax('api/v1.user/getSmsCode', {
				type: 'register',
				mobile: this.phone
			})
				.then(res => {
					uni.showToast({
						title: '验证码发送成功',
						icon: 'none'
					});
				})
				.catch(res => {
					console.log(Error);
				});
		},

		goSubmit() {
			let that = this;
			if (!/^1[3456789]\d{9}$/.test(that.phone)) {
				that.$sToast('手机号格式错误');
				return;
			}
			if ( !/^\d{6}$/.test(that.possword) && that.possword == '') {
				that.$sToast('密码不能为空，密码最少6位');
				return;
			}
			if (that.yanzheng == '') {
				that.$sToast('验证码不能为空');
				return;
			}
			if (that.now == 1) {
				that.$ajax('api/v1.user/register', {
					telephone: that.phone,
					smscode: that.yanzheng,
					password: that.possword
				})
					.then(res => {
						const { code, result } = res;
						if (code == 1) {
							console.log(result);
							uni.setStorageSync('userinfo', result);
							that.$sToast('注册成功');
							setTimeout(function() {
								uni.navigateTo({
									url: './login',
									icon: 'none'
								});
							}, 1500);
						} else {
							console.log(res);
						}
					})
					.catch(res => {
						console.log(Error);
					});
			} else {
				that.$sToast('请阅读协议');
			}
		},
		reading() {
		this.ade=!this.ade
			if (this.isActive) {
				this.isActive = false;
				this.now = 0;
				console.log(this.now);
			} else {
				this.isActive = true;
				this.now = 1;
				console.log(this.now);
			}
		},
		goxie(){
			uni.navigateTo({
				url:'./yinsi'
			})
		}
	},
	computed: {
		disableCodeBtn: function() {
			return this.codeBtn.waitingCode;
		}
	}
};
</script>

<style lang="scss" scoped>
$color-primary: #128ef9;

.content {

	padding: 60rpx 30rpx 100rpx;
}

.logo {
	text-align: center;

	image {
		height: 200rpx;
		width: 200rpx;
		margin: 0 0 40rpx;
	}
}

.uni-form-item {
	margin-bottom: 30rpx;
	padding: 0;
	border-bottom: 1px solid #e3e3e3;

	.uni-input {
		font-size: 30rpx;
		padding: 7px 0;
	}
}

.column-with-btn {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	button {
		font-size: 24rpx;
		margin: 0;
		width: 180rpx;
		text-align: center;
		margin-bottom: 28upx;
		&:after {
			border: none;
		}

		&.active {
			background-color: $color-primary;
			color: $uni-text-color-inverse;
		}
	}
}
.ade{
	width: 25rpx;
	height: 25rpx;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10rpx;
}
.img-captcha {
	width: 150rpx;
	height: 60rpx;
}

button[type='primary'] {
	background-color: $color-primary;
	border-radius: 0;
	font-size: 34rpx;
	margin-top: 60rpx;
}

.links {
	text-align: center;
	margin-top: 40rpx;
	font-size: 26rpx;
	color: #999;

	view {
		display: inline-block;
		vertical-align: top;
		margin: 0 10rpx;
	}

	.link-highlight {
		color: $color-primary;
	}
}

.wo {
	font-size: 22rpx;
	vertical-align: middle;
}

.icon {
	margin-top: 5rpx;
	position: relative;
	top: 0rpx;
	right: 3rpx;
}
.ica{
	color: #128ef9;
}
.xieyi {
	font-size: 26rpx;
	color: #666;
	vertical-align: middle;
	color: $color-primary;
	margin-top: 25upx;
}
.register{
	margin-top: 100upx;
	image{
		width: 100%;
		height: 85upx;
	}
}
</style>
